<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>

<body>
    <h1>AJAX测试</h1>
    <hr>

    <button id="btn">点我加载数据</button>
    <div id="root"></div>

    <script>
        const btn = document.getElementById("btn")
        const root = document.getElementById("root")
        // 加载服务器数据
        btn.onclick = () => {
            const xhr = new XMLHttpRequest()

            // 设置响应体的类型，设置之后会自动对数据进行类型转换
            xhr.responseType = "json"

            xhr.onload = () => {
                // xhr.status 表示响应状态码
                if (xhr.status === 200) {
                    // xhr.response 表示响应信息
                    // const result = JSON.parse(xhr.response)
                    // console.log(xhr.response);
                    const result = xhr.response
                    // 判断数据是否正确
                    if (result.status === "ok") {
                        // 创建一个ul
                        const ul = document.createElement("ul")
                        // 将ul插入到root中
                        root.appendChild(ul)
                        // 遍历数据
                        for (let stu of result.data) {
                            ul.insertAdjacentHTML(
                                "beforeend",
                                `<li>${stu.id} - ${stu.name} - ${stu.age} - ${stu.gender} - ${stu.address} - </li>`
                            )
                        }

                    }
                }

            }
            xhr.open("GET", "http://localhost:3000/students")
            xhr.send()

            // 渲染客户端
        }
    </script>
</body>

</html>